<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="http://cdn.ronghub.com/RongIMLib-2.2.4.min.js"></script>
		<script type="text/javascript" src="js/IMchat.js"></script>
		<style>
			/**重置标签默认样式*/
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				font-family: '微软雅黑'
			}
			
			html,
			body {
				height: 100%;
			}
			
			#container {
				width: 100%;
				height: calc(100% - 100px);
				background: #eee;
				position: relative;
				box-shadow: 20px 20px 55px #777;
			}
			
			.header {
				position: fixed;
				padding: 10px 10px;
				top: 0;
				left: 0;
				width: 100%;
				background: #000;
				color: #fff;
				font-size: 20px;
			}
			
			.header .date {
				padding: 0 10px;
				float: right;
			}
			
			.footer {
				padding: 5px 0;
				display: -webkit-flex;
				/* Safari */
				-webkit-align-items: center;
				/* Safari 7.0+ */
				display: flex;
				align-items: center;
				width: 100%;
				background: #666;
				position: fixed;
				bottom: 0;
			}
			
			#user_face_icon {
				margin: 0 10px;
				background: red;
				width: 40px;
				height: 40px;
				cursor: pointer;
				overflow: hidden;
			}
			
			img {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
			
			.footer input {
				width: 65%;
				height: 40px;
				border: 0;
				font-size: 14px;
				text-indent: 10px;
				border-radius: 3px;
			}
			
			.footer span {
				margin: 0 5px;
				padding: 8px 0;
				width: 30%;
				background: #ccc;
				font-weight: 900;
				cursor: pointer;
				text-align: center;
				border-radius: 3px;
			}
			
			.footer span:hover {
				color: #fff;
				background: #999;
			}
			
			.content {
				padding-top: 54px;
				font-size: 20px;
				height: 100%;
				overflow: auto;
			}
			
			.content li {
				margin-top: 10px;
				padding-left: 10px;
				display: block;
				clear: both;
				overflow: hidden;
			}
			
			.content li img {
				float: right;
				width: 40px;
				height: 40px;
			}
			
			.content li span {
				background: #7cfc00;
				padding: 10px;
				float: right;
				border-radius: 10px;
				margin: 6px 10px 0 10px;
				max-width: 310px;
				border: 1px solid #ccc;
				box-shadow: 0 0 3px #ccc;
			}
			
			.content li img.imgleft {
				float: left;
			}
			
			.content li img.imgright {
				float: right;
			}
			
			.content li span.spanleft {
				float: left;
				background: #fff;
			}
			
			.content li span.spanright {
				float: right;
				background: #7cfc00;
			}
		</style>
		<script>
			window.onload = function() {
				var btn = document.getElementById('btn');
				var text = document.getElementById('text');

				btn.onclick = function() {
					if(text.value == '') {
						alert('不能发送空消息');
					} else {
						var target = $(".mui-title").text();
						console.log(target);
						sendMessage(text.value, target);
						appendMessage(text.value, "right");
						// 内容过多时,将滚动条放置到最底端   
						//	contentcontent.scrollTop = content.scrollHeight;
					}
				}
			}
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div class="mui-title" align="center" onclick="del()"></div>
		</header>
		<div id="container">
			<ul class="content">
				<!-- 欢迎加入qq群：454796847、135430763 -->
			</ul>
			<div class="footer">
				<input id="text" type="text" placeholder="说点什么吧...">
				<span id="btn">发送</span>
			</div>
		</div>
	</body>
	<script>
		mui.plusReady(function() {
			var name = plus.webview.currentWebview().name;
			$(".mui-title").text(name);
		})

		function del() {
			var username = $(".mui-title").text();
			mui.confirm(username, '删除好友', ['取消', '删除'], function(e) {
				if(e.index == 1) {
					var account = app.getState().account;
					mui.post('http://hs.tunnel.javano.cn/delFriend', {
						username: username,
						account : account
					}, function(data) {
						mui.openWindow({
							"id": new Date(),
							"url": "tab2.html",
							"crateNew": false,
							"styles": {
								top: '0px', //mui标题栏默认高度为45px
								bottom: '50px' //默认为0px，可不定义
							}
						});
					}, 'text');
				}
			}, 'div')
		}
	</script>

</html>